const $ = elm=>document.querySelector(elm);
const $s = elm=>document.querySelectorAll(elm);
const dot = $s(".nav ul li");
const con = $s(".con ul li");
const bar = $(".bar");
let z=0; //鼠标之前点击点
let s=0; //进度条的距离



for(let i=0;i<dot.length;i++){
    
    dot[i].addEventListener("click",function(e){
        if(z===i) return;
        width = window.innerWidth;
        dot[z].classList.remove("color_blue");
        dot[z].querySelector("img").src = 'images/nav'+z+'.png';
        dot[i].classList.add("color_blue");
        dot[i].querySelector("img").src = 'images/'+i+'.png';
        s=160+i*160;
        anime({
			targets: bar,
            width : s,  
            duration : 1000,
            easing: 'easeInOutExpo'
		});
        if(i>z){            
            anime({
                targets: con[z],
                left: "-100%",  
                duration : 1000,
                easing: 'easeInOutExpo'
            });
            con[i].style.left = "100%";
            anime({
                targets: con[i],
                left : 0,  
                duration : 1000,
                easing: 'easeInOutExpo'
            });
        }
        else if(i<z)
        {
            anime({
                targets: con[z],
                left: "100%",  
                duration : 1000,
                easing: 'easeInOutExpo'
            });
            con[i].style.left = "-100%";
            anime({
                targets: con[i],
                left : 0,  
                duration : 1000,
                easing: 'easeInOutExpo'
            });
        }
        z = i;
    });
   
 
}












